<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="300" style="border:1px solid #000;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;

    // --- Define coordinates and dimensions ---
    const y_main = 140;
    const x_s = 100;
    const x_b = 400;
    const markSize = 5; // Size of the 'x' marks for S and B
    const velocityArrowLength = 70;
    const arrowHeadSize = 8;

    // --- Function to draw an 'x' mark ---
    function drawXMark(x, y, size) {
        ctx.beginPath();
        ctx.moveTo(x - size, y - size);
        ctx.lineTo(x + size, y + size);
        ctx.moveTo(x + size, y - size);
        ctx.lineTo(x - size, y + size);
        ctx.stroke();
    }

    // --- Function to draw an arrowhead ---
    function drawArrowhead(x, y, angle, size) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, -size / 2);
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, size / 2);
        ctx.stroke();
        ctx.restore();
    }
    
    // --- Function to draw a filled arrowhead ---
    function drawFilledArrowhead(x, y, angle, size) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-size*1.5, -size*0.75);
        ctx.lineTo(-size*1.5, size*0.75);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }


    // --- Draw Point S ---
    drawXMark(x_s, y_main, markSize);
    ctx.font = '22px Times New Roman';
    ctx.fillText('S', x_s - 5, y_main - 15);

    // --- Draw Point B ---
    drawXMark(x_b, y_main, markSize);
    ctx.font = '22px Times New Roman';
    ctx.fillText('B', x_b + 15, y_main + 8);

    // --- Draw Dashed Line between S and B ---
    ctx.beginPath();
    ctx.setLineDash([7, 7]);
    ctx.moveTo(x_s + markSize, y_main);
    ctx.lineTo(x_b - markSize, y_main);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // --- Draw Distance L Dimension ---
    const y_dim_line = 200;
    const tick_height = 10;
    // Main dimension line
    ctx.beginPath();
    ctx.moveTo(x_s, y_dim_line);
    ctx.lineTo(x_b, y_dim_line);
    ctx.stroke();
    // Ticks
    ctx.beginPath();
    ctx.moveTo(x_s, y_dim_line - tick_height);
    ctx.lineTo(x_s, y_dim_line + tick_height);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x_b, y_dim_line - tick_height);
    ctx.lineTo(x_b, y_dim_line + tick_height);
    ctx.stroke();
    // Arrowheads on the dimension line
    drawArrowhead(x_s, y_dim_line, Math.PI, arrowHeadSize); // Left arrow
    drawArrowhead(x_b, y_dim_line, 0, arrowHeadSize);       // Right arrow
    // Label L
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('L', (x_s + x_b) / 2 - 8, y_dim_line - 5);


    // --- Draw Velocity Vector v ---
    const y_arrow_end = y_main - velocityArrowLength;
    // Arrow shaft
    ctx.beginPath();
    ctx.moveTo(x_b, y_main);
    ctx.lineTo(x_b, y_arrow_end);
    ctx.stroke();
    // Filled Arrowhead
    drawFilledArrowhead(x_b, y_arrow_end, Math.PI / 2, arrowHeadSize);
    // Label v
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('v', x_b + 15, y_main - velocityArrowLength / 2 + 5);

</script>
</body>
</html>